<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index"  @click="showList(index)">{{item}}</li>
        </ul>
        <div>自定义事件</div>
        <input type="text" placeholder="输入你要做的事"  v-model="msg">
        <button @click="showItem">确认</button>
    </div>
</template>



<script>
export default {
    name:"ListPart",
    data () {
        return {
            list:['吃饭','睡觉','学Vue'],
            index:'',
            msg:'',
        }
    },
    methods: {
        showList(index) {
            this.$router.push({
                path:'/task',
                query:{
                    title:this.list[index]
                }
            })
        },
        showItem() {
            this.$router.push({
                path:'/task',
                query:{
                    title:this.msg
                }
            })
        },
    }
  
}
</script>

<style scoped>

li {
  list-style:none;
}
</style>
